import React from 'react';
import {
    Text,
    View,
    Image,
    Button,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    ImageBackground
} from 'react-native';
import BasePage from "./BasePage";
import CommonStyle from "../../Component/CommonStyle";
import moment from 'moment';

class EventTeamInfo extends BasePage {
    constructor(props) {
        super(props);

    }


    _ismatchstats(stats) {
        switch (stats) {
            case 0:
                return <Text style={styles.gameStatus}>比赛异常</Text>
                break;
            case 1:
                return <Text style={styles.gameStatus}>未开赛</Text>
                break;
            case 2:
                return <Text style={styles.gameStatus}>上半场</Text>
                break;
            case 3:
                return <Text style={styles.gameStatus}>中场</Text>
                break;
            case 4:
                return <Text style={styles.gameStatus}>下半场</Text>
                break;
            case 5:
                return <Text style={styles.gameStatus}>加时赛上半场</Text>
                break;
            case 6:
                return <Text style={styles.gameStatus}>加时赛下半场</Text>
                break;
            case 7:
                return <Text style={styles.gameStatus}>点球决战</Text>
                break;
            case 8:
                return <Text style={styles.gameStatus}>完场</Text>
                break;
            case 9:
                return <Text style={styles.gameStatus}>推迟</Text>
                break;
            case 10:
                return <Text style={styles.gameStatus}>中断</Text>
                break;
            case 11:
                return <Text style={styles.gameStatus}>腰斩</Text>
                break;
            case 12:
                return <Text style={styles.gameStatus}>取消</Text>
                break;
            case 13:
                return <Text style={styles.gameStatus}>待定</Text>
                break;
        }
    }

    render() {
        var Dimensions = require('Dimensions');
        var ScreenWidth = Dimensions.get('window').width;
        let btnW = (ScreenWidth - 40) / 3;
        return (
            <TouchableOpacity onPress={() => {
            }} style={{flexDirection: 'row', width: '100%', height: 100, backgroundColor: '#C13331'}}>


                {
                    this.props.data.matchStatus >= 2 && this.props.data.matchStatus < 8 ?
                        <View style={{
                            height: 100,
                            width: CommonStyle.screenwidth,
                            flexDirection: 'row',
                            justifyContent: 'center',
                        }}>
                            <ImageBackground
                                style={styles.leftBackgroundImage}>

                                <Text
                                    style={{
                                        fontSize: 20, color: 'white', width: '100%',
                                        height: 30,
                                        textAlign: 'center',
                                    }}>
                                    {
                                        this.props.data.homeScore
                                    }
                                </Text>
                                <Text style={{
                                    fontSize: 13, color: 'white', width: '100%',
                                    height: 20,
                                    textAlign: 'center',
                                }}>{this.props.data.homeNm}</Text>
                            </ImageBackground>
                            <View
                                style={{justifyContent: 'center', alignItems: 'center',flex:1}}>

                                <Text
                                    style={{  width: '100%',
                                        height: 20,
                                        fontSize: 13,
                                        textAlign: 'center',
                                        color: 'white'}}>{moment.unix(this.props.data.matchStartTime).format('YYYY-MM-DD HH:mm:ss')}</Text>

                                {
                                    this._ismatchstats(this.props.data.matchStatus)
                                }


                            </View>
                            <ImageBackground
                                style={styles.rightBackgroundImage}>

                                <Text
                                    style={{
                                        fontSize: 20, color: 'white', width: '100%',
                                        height: 30,
                                        textAlign: 'center',
                                    }}>

                                    {
                                        this.props.data.awayScore
                                    }
                                </Text>
                                <Text style={{
                                    fontSize: 13, color: 'white', width: '100%',
                                    height: 20,
                                    textAlign: 'center',
                                }}>{this.props.data.awayNm}</Text>

                            </ImageBackground>

                        </View>
                        :
                        <View style={{
                            height: 100,
                            width: CommonStyle.screenwidth,
                            flexDirection: 'row',
                            justifyContent: 'center',
                        }}>
                            <ImageBackground source={require('../../Component/Common/img/zuo.png')}
                                             style={styles.leftBackgroundImage}>

                                <Image source={{uri: this.props.data.homeLogo}}
                                       style={styles.leftTeamIcon}></Image>
                                <Text style={styles.leftTeamName}>{this.props.data.homeNm}</Text>
                            </ImageBackground>
                            <ImageBackground source={require('../../Component/Common/img/zhong.png')}
                                             style={styles.midBackgroundImage}>

                                <Text
                                    style={styles.gameStartTime}>{moment.unix(this.props.data.matchStartTime).format('YYYY-MM-DD HH:mm:ss')}</Text>

                                {
                                    this._ismatchstats(this.props.data.matchStatus)
                                }


                            </ImageBackground>
                            <ImageBackground source={require('../../Component/Common/img/you.png')}
                                             style={styles.rightBackgroundImage}>
                                <Image source={{uri: this.props.data.awayLogo}}
                                       style={styles.leftTeamIcon}></Image>
                                <Text style={styles.leftTeamName}>{this.props.data.awayNm}</Text>
                            </ImageBackground>

                        </View>

                }


            </TouchableOpacity>
        );
    }
}

export default EventTeamInfo

const styles = StyleSheet.create({
    leftBackgroundImage: {
        marginLeft: 20,
        height: 100,
        flex: 1,
        resizeMode: 'stretch',
        justifyContent: 'center', alignItems: 'center'
    },
    midBackgroundImage: {
        height: 100,
        width: 133,
        resizeMode: 'stretch', justifyContent: 'center', alignItems: 'center'

    },
    rightBackgroundImage: {
        marginRight: 20,
        height: 100,
        flex: 1,
        resizeMode: 'stretch',
        justifyContent: 'center', alignItems: 'center'
    },
    leftTeamIcon: {
        width: 50,
        height: 60,
        resizeMode: 'stretch',
    },
    leftTeamName: {
        width: '100%',
        height: 20,
        textAlign: 'center',
        color: 'red'
    },
    gameStartTime: {
        width: '100%',
        height: 20,
        marginTop: 50,
        fontSize: 13,
        textAlign: 'center',
        color: 'white'
    },
    gameStatus: {
        width: '100%',
        height: 20,
        marginTop: 2,
        fontSize: 14,
        textAlign: 'center',
        color: 'white'
    },
    rightTeamIcon: {
        width: 50,
        height: 60,
        marginTop: 10,
        resizeMode: 'stretch',
    },
    rightTeamName: {
        width: '100%',
        height: 20,
        textAlign: 'center',
        color: 'red'
    },
})